<template>
    <div class="formRuleDescription" v-if="formType !== 'view' && isShowFormRuleDescription">
        <el-popover placement="right" :offset="38" :width="300" trigger="click">
            <template #reference>
                <el-button style="margin-right: 16px" type="primary" plain>填写规则</el-button>
            </template>
            <div style="font-size: 18px;margin-bottom: 15px;">填写规则</div>
            <div class="formRuleContent">
                <template v-for="(item, index) in elFormItemConfigs">
                    <div class="ruleItem" v-if="item.ruleDescription" :key="index">
                        <span>{{ item.formItemLabel + "：" }}</span>
                        <span style="color: brown;">{{ item.ruleDescription }}</span>
                    </div>
                </template>
            </div>
        </el-popover>
    </div>
    <div class="formContainerbody">
        <el-form ref="formObj" :model="formData" v-bind="formConfig.formEleConfig" :rules="rules"
            :disabled="formType === 'view'" :show-message="formType !== 'view'" :scroll-to-error="true">
            <el-row :gutter="35">
                <el-col v-bind="formConfig.formLayoutConfig" v-for="(item, index) in elFormItemConfigs" :key="index">
                    <el-form-item :label="item.formItemLabel + ' :'" :prop="item.prop">
                        <div v-if="item.elItem === 'ElUpload'" style="width: 100%;">
                            <fileList v-model="formData[item.vModelfield]" :form-type="formType" :field-config="item"
                                :table-grid-id="tableGridId" />
                        </div>
                        <component v-else :is="getComponentSize(item.elItem)" v-model="formData[item.vModelfield]"
                            :form-type="formType" v-bind="item.attributesBind" :table-grid-id="tableGridId">
                            <template #default v-if="item.elItem === 'ElSelect'">
                                <el-option v-for="(groupCon, groupIndex) in item.optionConfigs" :key="groupIndex"
                                    :label="groupCon.label" :value="groupCon.value" />
                            </template>
                            <template #default v-else-if="item.elItem === 'ElCheckboxGroup'">
                                <el-checkbox v-for="(groupCon, groupIndex) in item.optionConfigs" :key="groupIndex"
                                    :label="groupCon.label" :value="groupCon.value" />
                            </template>
                            <template #default v-else-if="item.elItem === 'ElRadioGroup'">
                                <el-radio v-for="(groupCon, groupIndex) in item.optionConfigs" :key="groupIndex"
                                    :value="groupCon.value">{{ groupCon.label }}</el-radio>
                            </template>
                        </component>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script lang='ts' setup name='ConfigAbleForm'>
import { onMounted, ref } from "vue";
import { dealFormItemConfig, getComponentSize, getRules } from '../../hooks/dealComponents';
import type { FormRules } from 'element-plus';
import { setFormItemConfigs } from "../../hooks/initFormItemconfig";
import fileList from './components/fileList.vue'

const formObj = ref();
const elFormItemConfigs = ref<Array<formItemConfigType>>([]);
const formData = defineModel<any>('formData', { required: true });
const props = defineProps({
    formItemConfigs: {
        type: Array<fieldConfig>,
        required: true
    },
    formType: {
        type: String,
        default: () => ''
    },
    tableGridId: {
        type: String,
        required: true
    }
})
const rules = ref<FormRules>({});
const isShowFormRuleDescription = ref(false);
const formConfig = {
    formEleConfig: {
        style: { width: '800px' },
        'inline-message': true,
        'label-width': "auto"
    },
    formLayoutConfig: {
        //自适应布局
        xs: 24, sm: 24, md: 24, lg: 24, xl: 24
    }
}

onMounted(() => {
    setFormItemConfigs(props.formItemConfigs).then((elFormConfig: { isShowFormRuleDescription: boolean, formItemConfigs: formItemConfigType[] }) => {
        elFormItemConfigs.value = dealFormItemConfig(elFormConfig.formItemConfigs);
        rules.value = getRules(elFormConfig.formItemConfigs);
        isShowFormRuleDescription.value = elFormConfig.isShowFormRuleDescription;
    });
})

defineExpose({
    formObj
})
</script>

<style lang="scss" scoped>
.formRuleDescription {
    width: 100%;
    height: 40px;
    text-align: right;
}

.formContainerbody {
    width: 100%;
    max-height: 640px;
    display: flex;
    justify-content: center;
    overflow: auto;
}

:deep(.el-color-picker__trigger) {
    width: 200px;

    .el-color-picker__color-inner {
        padding-right: 5px;
        justify-content: right;
    }
}

:deep(.el-empty) {
    --el-empty-padding: 0 0;
    --el-empty-description-margin-top: 0px;
}

:deep(.el-upload-dragger) {
    padding: 5px;
}
</style>
